<!DOCTYPE html>
<html>
	<head>
		<title>Getting started with Visual Studio Tools for Apache Cordova</title>
		<style type="text/css">
			* {
		        margin: 0;
		        padding: 0;
		        border: 0;
		        outline: 0;
		        font-size: 100%;
		        background: transparent;
				vertical-align: top;
	    	}
	    	html,body,.startpage {
	    		height:100%;
	    		white-space: nowrap;
	    	}
	    	.startpage {
	    		background-color: #efeff2;	
	    		font-family: "Segoe UI","Segoe WP",Helvetica,Arial,sans-serif;
				text-align: left;
	    	}
	    	#taco-bot {
	    		position:absolute;
				left:0;
	    		z-index: -1;
	    	}
	    	.side-menu {
				float:left;
	    		height:100%;
	    		width: 310px;
	    		padding: 50px 20px;
	    	}
	    	.side-menu-title {
	    		font-weight: 100;
	    		font-size: 28pt;
	    		color: #621974;
	    	}
	    	.side-menu-title-sub {
	    		margin:40px 0 10px;

	    		font-weight: 300;
	    		font-size: 14pt;
	    		color: #252525;
	    	}
	    	.side-menu-title-sub-body {
	    		padding:8px 0;

	    		font-weight: 500;
	    		font-size: 12pt;
	    		color: #0079d5;
	    	}
	    	a {
	    		color: #0079d5;
	    		text-decoration: none;
	    	}

	    	.content {
	    		position:absolute;
				left:350px;
	    		min-height:800px;
	    		min-width: 900px;
	    		padding: 59px 50px;
	    		
	    		background-color: white;
	    		white-space: normal;
	    	}
	    	.content-block {
	    		position: relative; 
	    		min-width: 900px;
	    	}
	    	.content-text {
				float:left;
	    		width:640px;
	    		margin-right: 45px;
	    	}
	    	.content-images {
	    		display:inline-block;
	    	}
	    	.content-title {
	    		padding-bottom: 10px;

				font-weight: 500;
	    		font-size: 22pt;
	    		color: #621974;
	    	}
	    	.content-title-body {
	    		padding-bottom: 50px;
	    		line-height: 150%;

				font-weight: 500;
	    		font-size: 14pt;
	    		color: #464646;
	    	}
	    	.step-image {
				float:left;
	    		position: relative;
	    	}


		</style>
	</head>

	<body class="startpage">
		<div id="taco-bot">
				<img width='303' height='289' title='TACO-bot' alt='I am the TACO bot' src=''>
			</div>

		<div class="side-menu">

			<h1 class="side-menu-title">Ionic Templates</h1>

			<div class="links">
				<h3 class="side-menu-title-sub">Quick Starts</h3>
				
					<p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760737">Back to basics in our Beginner Guide</a></p>
                    <p class="side-menu-title-sub-body"><a target="_blank" href="http://taco.visualstudio.com/en-us/docs/tutorial-ionic/">Getting Started with Ionic</a></p>
					<p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760741">Use Typescript in your app</a></p>
					<p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760740">Move your web app to mobile</a></p>
				
			</div>

			<div class="links">
				<h3 class="side-menu-title-sub">Add Mobile Services</h3>

					<p class="side-menu-title-sub-body"><a target="_blank" href="https://azure.microsoft.com/en-us/documentation/articles/app-service-mobile-cordova-get-started/">Add a cloud backend</a></p>
					<p class="side-menu-title-sub-body"><a target="_blank" href="https://azure.microsoft.com/en-us/documentation/articles/app-service-mobile-cordova-get-started-push/">Push notifications to users</a></p>
					<p class="side-menu-title-sub-body"><a target="_blank" href="https://azure.microsoft.com/en-us/documentation/articles/app-service-mobile-cordova-get-started-users/">Add login authentication</a></p>
				
			</div>

			<div class="links">
				<h3 class="side-menu-title-sub">Platform Guides</h3>
				
					<p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760745">iOS</a></p>
					<p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760746">Android</a></p>
					<p class="side-menu-title-sub-body"><a target="_blank" href=" http://go.microsoft.com/fwlink/?LinkId=760747">Windows</a></p>

			</div>

			<div class="links">
				<h3 class="side-menu-title-sub">Documentation</h3>
				
					<p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760742">Tools for Apache Cordova</a></p>
                    <p class="side-menu-title-sub-body"><a target="_blank" href="http://ionicframework.com/">Ionic Framework</a></p>
					<p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760748">The Apache Cordova Project</a></p>
					<p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760744">Latest Release Notes</a></p>
					<p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760743">VS Cordova on StackOverflow</a></p>
				
			</div>

			

		</div>

		<div class="content">
			<div class="content-block">
				<div class="content-text">
					<h1 class="content-title">Step 1: Build first</h1>
					<p class="content-title-body">During a project's first build, Visual Studio downloads a copy of Cordova, Ionic and your project dependencies into your solution. <strong>This can take up to 5min., and requires an internet connection.</strong> It's important that the Task Runner Explorer is open while building the project; to open it use the View | Other Windows | Task Runner Explorer menu.</p>
				</div>
				
				<img class="step-image" id="step1" width='215' height='64' title='Step 1' alt='Step 1' src=''>
			</div>

			<div class="content-block">
				<div class="content-text">
					<h1 class="content-title">Step 2: Make changes to your app</h1>
					<p class="content-title-body">Get familiar with the Ionic project structure; use the <a target="_blank" href="http://ionicframework.com/">Ionic docs </a> for reference. Learn how to add your own HTML, CSS and JavaScript / TypeScript files to your project. For more tips and tricks, see the <a target="_blank" href="http://taco.visualstudio.com/en-us/docs/tutorial-ionic/"> Getting Started with Ionic in Visual Studio</a> guide.</p>
				</div>
				
				<img class="step-image" id="step2" width='145' height='170' title='Step 2' alt='Step 2' src=''>
			</div>

			<div class="content-block">
				<div class="content-text">
					<h1 class="content-title">Step 3: Configure Android and iOS builds</h1>
					<p class="content-title-body">Set up your project so that you can build and deploy your app to devices and emulators running Android and iOS. <br/><br/>Visual Studio comes with the Android SDK, so build an Android app directly on your machine using our <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760746">Android build guide</a>. Building and deploying to iOS requires you to connect to Mac OSX. Hook Visual Studio up to a Mac or a Mac-in-cloud service through our <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760745">iOS remotebuild setup guide.</a></p>
				</div>
				
				<img class="step-image" id="step3" width='215' height='60' title='Step 3' alt='Step 3' src=''>
			</div>

			<div class="content-block">
				<div class="content-text">
					<h1 class="content-title">Step 4: Connect your app to Azure</h1>
					<p class="content-title-body">Use the new Azure App Service Mobile Apps to hook your mobile app up to Azure in minutes. Set up user authentication on your app, push data to your users, and connect to data. <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533127">Start the tutorial here.</a></p>
				</div>
				
				<img class="step-image" id="step4" width='215' height='140' title='Step 4' alt='Step 4' src=''>
			</div>
		</div>
	</body>
</html>